<template>
  <div>
     <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 提示信息区域 -->
       <el-alert
        title="添加商品信息"
        type="info"
        center
        show-icon>
    </el-alert>
    <!-- 步骤条 -->
    <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <!-- tab栏区域 -->
    <el-form label-position="top" :model="addForm" :rules="addFormrules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
    <el-tabs :tab-position="'left'" v-model="activeIndex" :before-leave="tabChange" @tab-click="tabClicked">
      <el-tab-pane label="基本信息" name="0">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="addForm.price" type="number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="weight">
          <el-input v-model="addForm.weight" type="number"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
          <el-input v-model="addForm.num" type="number"></el-input>
        </el-form-item >
        <el-form-item label="商品分类" >
          <el-cascader
            v-model="selectProduct"
            :props="productParam"
            :options="productList"
            clearable
            expand-trigger="hover"
            @change="changeState">
           </el-cascader>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="商品参数" name="1">
        <el-form-item :label="item.class" v-for="(item, i) in Dlist" :key="i">
          <el-checkbox-group v-model="item.desc">
            <el-checkbox border :label="item" v-for="item in item.desc" :key="item._id" ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- <el-form-item label="版式">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="item.name" v-for="item in checkList" :key="item.id" ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
         <el-form-item label="颜色">
          <el-checkbox-group v-model="checkList">
            <el-checkbox :label="item.color" v-for="item in checkList" :key="item.id"></el-checkbox>
          </el-checkbox-group>
        </el-form-item> -->
      </el-tab-pane>
      <el-tab-pane label="商品属性" name="2">
        <el-form-item>
          <label>主体</label>
          <el-input v-model="Slist.iteam"></el-input>
        </el-form-item>
         <el-form-item>
          <label>是否有货</label>
          <br>
          <i class="el-icon-success" v-if="Slist.status === true" style="color:skyblue;margin-left:20px;font-size:22px;"></i>
          <!-- <el-input v-model="Slist.status"></el-input> -->
        </el-form-item>
        <el-form-item>
          <label>品牌</label>
          <el-input v-model="Slist.system"></el-input>
        </el-form-item>
        <el-form-item>
          <label>外观</label>
          <el-input v-model="Slist.apparent"></el-input>
        </el-form-item>
          <!-- <el-form-item v-for="item in AttributeList" :key="item.id" :label="item.name">
            <el-input v-model="item.color"></el-input>
          </el-form-item> -->
      </el-tab-pane>
      <el-tab-pane label="商品图片" name="3">
        <el-upload
          action="http://localhost:4000/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :headers="headerObj"
          list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容" name="4">
        <quill-editor v-model="addForm.content"></quill-editor>
        <el-button type="primary" @click="addClass" style="margin-top:15px">添加商品</el-button>
      </el-tab-pane>
    </el-tabs>
    </el-form>

    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // checkList: [{ name: '人工智能', id: 1, color: '黄色' }, { name: '智慧芯片', id: 2, color: '绿色' }, { name: '定时器', id: 3, color: '红色' }],
      // AttributeList: [{ name: '主体-商品名称', id: 1, color: 'TCL-A5524' }, { name: '显示-曲面', id: 2, color: '是' }, { name: '系统', id: 3, color: '智能电视' }, { name: '外观', id: 4, color: '悬挂' }],
      activeIndex: '0',
      addForm: {
        name: '',
        price: '',
        weight: '',
        num: 0,
        class: '',
        content: ''
      },
      addFormrules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入商品数量', trigger: 'blur' }
        ]
      },
      selectProduct: [],
      productParam: {
        value: '_id',
        label: 'label',
        children: 'children'
      },
      productList: [],
      Dlist: [],
      Slist: [],
      headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      }
    }
  },
  methods: {
    changeState () {
      console.log(this.selectProduct)
      console.log(this.Slist)
    },
    async getProductClass () {
      const res = await this.$http.get('/product')
      this.productList = res.data.list
    },
    tabChange (activeName, oldActiveName) {
      if (oldActiveName === '0' && this.selectProduct.length !== 3) {
        this.$message.error('请先选择商品分类')
        return false
      }
    },
    handlePreview () {

    },
    handleRemove () {

    },
    async addClass () {
      this.$refs.addFormRef.validate(valid => {
        if (!valid) return this.$message.error('请填入完整信息！')
      })
      await this.$http.post('/adNew', {
        params: {
          name: this.addForm.name,
          price: this.addForm.price,
          num: this.addForm.num
        }
      })
      this.$message.success('添加成功！')
      this.$router.push('/product')
    },
    async tabClicked () {
      console.log(this.activeIndex)
      // 切换标签获得静态属性
      if (this.activeIndex === '1') {
        const res = await this.$http.get(`/class/${this.cradId}/attributes`, {
          params: { sel: 'Dynamics' }
        })
        console.log(res)
        res.data.doc.dynamics.forEach(item => {
          item.desc = item.desc.split('，')
        })
        this.Dlist = res.data.doc.dynamics
      }
      if (this.activeIndex === '2') {
        const res = await this.$http.get(`/class/${this.cradId}/attributes`, {
          params: { sel: 'States' }
        })
        console.log(res)
        this.Slist = res.data.doc.states[0]
      }
    }
  },
  created () {
    this.getProductClass()
  },
  computed: {
    cradId () {
      if (this.selectProduct.length === 3) {
        return this.selectProduct[2]
      }
      return null
    }
  }
}
</script>
<style lang="less" scoped>

</style>
